import React, { useState, useEffect, useCallback } from 'react';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import ColumnSetPanelItem from './components/ColumnSetPanelItem';
import './style/ColumnSetPanel.less';

let prefix = 'mctable';

function ColumnSetPanel(props) {
    const {
        dataSource,
        onChange,
        closePanel,
        keepLastItem
    } = props;
    const [panels, setPanels] = useState(dataSource);
    const [canCancel, setCanCancel] = useState(true);

    const movePanel = (dragIndex, hoverIndex) => {
        let dragPanel = panels[dragIndex];
        setPanels(update(panels, {
            $splice: [[dragIndex, 1], [hoverIndex, 0, dragPanel]]
        }));
    };

    const formatPanels = useCallback((newPanels) => {
        let _newPanels = newPanels.filter(panel => !panel.ignore);
        let len = 0;
        _newPanels.forEach(panel => {
            if (!('checked' in panel) || panel.checked === true) {
                len++
            }
        })
        if (len <= 1) {
            setCanCancel(false);
        } else {
            setCanCancel(true);
        }
    }, [keepLastItem]);

    const onCheck = (index, checked) => {
        let newPanels = [...panels];
        formatPanels(newPanels)
        newPanels[index].checked = checked;
        setPanels(newPanels);
        onChange(newPanels);
    }

    const endDrag = () => {
        onChange(panels);
    }

    useEffect(() => {
        formatPanels(dataSource);
        setPanels(dataSource);
    }, [dataSource]); // eslint-disable-line

    return (
        <div className={`${prefix}-column-set-panel-box`}>
            <div className="panel-title-wrapper">
                <span className="panel-title">表头设置</span>
                <span className={`${prefix}-fm ${prefix}-fm-cross`} onClick={closePanel} />
            </div>
            <div className="column-set-panel-wrapper">
                <DndProvider backend={HTML5Backend}>
                    {
                        Array.isArray(panels) && panels.length > 0 ?
                            panels.map((item, index) => {
                                return !item.ignore ?
                                    <ColumnSetPanelItem
                                        index={index}
                                        id={item.key}
                                        key={item.key}
                                        checked={'checked' in item ? item.checked : true}
                                        onCheck={onCheck}
                                        panel={item}
                                        canDrag={true}
                                        movePanel={movePanel}
                                        endDrag={endDrag}
                                        canCancel={canCancel}
                                    /> :
                                    null
                            }) :
                            null
                    }
                </DndProvider>
            </div>
        </div>
    )
}

export default ColumnSetPanel;
